<!-- 用户页面 -->
<template>
  <div class="container">
    <!-- 头部区域 -->
    <div class="header">
      <!-- 用户头像 -->
      <van-image
        width="60"
        height="60"
        round
        :src="userAvatar"
      />

      <!-- 用户信息 -->
      <div class="user_info">
        <!-- 用户名 -->
        <div class="user_name">
          {{ username }}
        </div>
        <!-- 用户 id -->
        <div class="user_id">
          {{ userID }}
        </div>
      </div>

      <!-- 设置图标 -->
      <van-icon name="setting-o" />
    </div>

    <!-- 主体区域 -->
    <div class="main">
      <!-- 用户信息区域 -->
      <van-cell-group class="user_detial" inset>
        <van-cell>
          <van-grid :border="false">
            <van-grid-item :text="collectCount">
              <template #icon>
                收藏
              </template>
            </van-grid-item>
            <van-grid-item :text="integral">
              <template #icon>
                积分
              </template>
            </van-grid-item>
            <van-grid-item :text="couponCount">
              <template #icon>
                优惠券
              </template>
            </van-grid-item>
            <van-grid-item :text="nowMoney">
              <template #icon>
                余额
              </template>
            </van-grid-item>
          </van-grid>
        </van-cell>
      </van-cell-group>

      <!-- 功能模块区域 -->
      <van-cell-group class="main" inset>
        <!-- 订单中心 -->
        <van-cell title="订单中心" value="查看全部" is-link to="/order" />

        <!-- 功能区域 -->
        <van-cell>
          <van-grid :column-num="5" :border="false">
            <van-grid-item icon="bill-o" text="代付款" />
            <van-grid-item icon="tosend" text="代发货" />
            <van-grid-item icon="logistics" text="待收货" />
            <van-grid-item icon="comment-o" text="待评价" />
            <van-grid-item icon="sign" text="已完成" />
          </van-grid>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 底部导航区域 -->
    <layout-footer />
  </div>
</template>

<script setup>
// -------------------------------- 导入模块 --------------------------------
// 导入 vue3 的 API
import { ref, computed } from 'vue'
// 导入全局底部导航组件
import LayoutFooter from '@/components/LayoutFooter.vue'

// 导入封装的用户接口
// 1、getUserInfo：获取用户信息
import { getUserInfo } from '@/api/user_api'

// 导入 vant 组件，按需引入
import {
  Image as VanImage,
  Icon as VanIcon,
  CellGroup as VanCellGroup,
  Cell as VanCell,
  Grid as VanGrid,
  GridItem as VanGridItem
} from 'vant'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// -------------------------------- 声明数据 --------------------------------
// 用户信息
const userInfo = ref({}) // 存储用户信息
// 用户头像
const userAvatar = computed(() => userInfo.value?.switchUserInfo?.[0].avatar || 'https://pic4.zhimg.com/v2-1ce31ed8d60950cabb1a85e8c8a0fc57_b.jpg')
// 用户昵称
const username = computed(() => userInfo.value?.nickname || '用户昵称')
// 用户 ID
const userID = computed(() => 'ID：' + (userInfo.value?.uid || '用户 ID'))
// 用户详情信息
const collectCount = computed(() => userInfo.value?.collectCount?.toString() || 'X') // 收藏数
const integral = computed(() => userInfo.value?.integral?.toString() || 'X') // 积分
const couponCount = computed(() => userInfo.value?.couponCount?.toString() || 'X') // 优惠券数
const nowMoney = computed(() => userInfo.value?.now_money?.toString() || 'X') // 收藏数

// -------------------------------- 函数封装 ---------------------------------
// 获取用户信息
const initUserInfo = async () => {
  const data = await getUserInfo() // 发送请求
  const result = judgeRequest(data.status, '获取用户数据失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    userInfo.value = data.data // 存储用户信息
  }
}

// -------------------------------- 函数调用 ---------------------------------
initUserInfo() // 调用获取用户信息函数
</script>

<style lang="scss" scoped>
// 整体区域
.container {
  height: 600px;
  padding: 15px 0;
  background: radial-gradient(circle at 50% -10%, #FBC546 72%, #F6F7F9 72%) #F6F7F9 0 -300px no-repeat;

  // 头部区域
  .header {
    display: flex;
    align-items: center;
    padding: 0 15px 15px;

    .van-image {
      margin-right: 15px;
    }

    // 用户信息
    .user_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;

      .user_name {
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
      }

      .user_id {
        font-size: 12px;
      }
    }
  }

  // 主体区域
  .main {
    // 用户信息区域
    .user_detial {
      margin-bottom: 10px;

      .van-cell {
        padding: 0;
        min-height: 74px;
      }
    }
  }
}
</style>
